<template>
  <el-row :gutter="5">
    <el-col :span="6">
      <el-card class="top" shadow="hover" style="height: calc(100vh - 20px)">
        <template #header>
          <div class="card-header">
            <span>专业信息</span>
            <div style="text-align: right">
              <el-button plain size="small" type="primary" @click="this.createCenCiState.open = true;this.createCenCiState.id = null; this.createCenCiState.type = 'CENCI';this.createCenCiState.parentId = 0;">新增层次
              </el-button>
            </div>
          </div>
        </template>
        <el-tree ref="treeRef" :data="treeData" :expand-on-click-node="false" :props="treeProps" default-expand-all highlight-current node-key="id" @node-click="handleNodeClick"/>
      </el-card>
    </el-col>
    <el-col :span="18">
      <el-card class="top" shadow="hover" style="height: calc(100vh - 20px)">
        <template #header>
          <div class="card-header">
            <span>操作</span>
            <div style="text-align: right">
              <el-button v-if="clickNode.type === 'CENCI'" plain size="small" type="primary" @click="this.createCenCiState.open = true;this.createCenCiState.id = this.clickNode.id;this.createCenCiState.type = 'CENCI';this.createCenCiState.parentId = 0;">编辑层次</el-button>
              <el-button v-if="clickNode.type === 'CENCI'" size="small" type="primary" @click="this.createCenCiState.open = true;this.createCenCiState.id = null;this.createCenCiState.type = 'ZHUANYE';this.createCenCiState.parentId = this.clickNode.id;">新增专业</el-button>
              <el-button v-if="clickNode.type === 'ZHUANYE'" plain size="small" type="primary" @click="this.createCenCiState.open = true;this.createCenCiState.id = this.clickNode.id;this.createCenCiState.type = 'ZHUANYE';this.createCenCiState.parentId = this.clickNode.id;">编辑专业</el-button>
            </div>
          </div>
        </template>
        <el-table v-if="clickNode.type==='CENCI'" :data="clickNode.children" border style="width: 100%">
          <el-table-column label="专业名称" min-width="100" prop="name" show-overflow-tooltip/>
          <el-table-column align="center" fixed="right" width="100">
            <template #default="scope">
              <a class="op" @click="this.createCenCiState.open = true;this.createCenCiState.id = scope.row.id;this.createCenCiState.type = scope.row.type;this.createCenCiState.parentId = this.clickNode.id;">更新</a>
            </template>
          </el-table-column>
        </el-table>
        <template v-else-if="clickNode.type==='ZHUANYE'">
          <el-tabs style="margin-bottom: 15px;" type="border-card">
            <el-tab-pane label="科目信息">
              <el-button type="primary" @click="this.createCenCiState.open = true;this.createCenCiState.id = null;this.createCenCiState.type = 'KEMU';this.createCenCiState.parentId = this.clickNode.id;">新增科目</el-button>
              <el-table :data="clickNode.children" border style="width: 100%;margin-top: 10px">
                <el-table-column label="科目名称" min-width="100" prop="name" show-overflow-tooltip/>
                <el-table-column label="科目编码" min-width="100" prop="code" show-overflow-tooltip/>
                <el-table-column align="center" fixed="right" width="100">
                  <template #default="scope">
                    <a class="op" @click="this.createCenCiState.open = true;this.createCenCiState.id = scope.row.id;this.createCenCiState.type = scope.row.type;this.createCenCiState.parentId = this.clickNode.id;">更新</a>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="考试时间">
              <el-button type="primary" @click="this.createExamState.open = true;this.createExamState.id = null;this.createExamState.basicId = this.clickNode.id;">新增考试时间</el-button>
              <el-table :data="examDate" border style="width: 100%;margin-top: 10px">
                <el-table-column label="考试时间" min-width="100" prop="date" show-overflow-tooltip/>
                <el-table-column align="center" fixed="right" width="100">
                  <template #default="scope">
                    <a class="op" @click="this.createExamState.open = true;this.createExamState.id = scope.row.id;this.createExamState.basicId = scope.row.basicId;">更新</a>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </template>
        <el-empty v-else description="无可操作的信息"/>
      </el-card>
    </el-col>
  </el-row>


  <create :state="createCenCiState" @updated="list"/>
  <create-exam-time :state="createExamState" @updated="listExamDate"/>
</template>
<script>

import Create from "@/views/basic/Create.vue";
import CreateExamTime from "@/views/basic/CreateExamTime.vue";

export default {
  name: "List",
  components: {Create, CreateExamTime},
  data() {
    return {
      treeProps: {
        children: 'children',
        label: 'name',
      },
      treeData: [],
      createCenCiState: {open: false, id: null, type: null, parentId: null},
      createExamState: {open: false, id: null},
      clickNode: {},
      examDate: []
    }
  },
  async created() {
    await this.list()
  },
  methods: {
    async list(event = {}) {
      this.treeData = await this.post('/basic/list-tree');
      if (event.del && this.clickNode.id === event.id) return this.clickNode = {}

      if (this.clickNode.id) {
        this.$nextTick(() => {
          this.$refs.treeRef.setCurrentKey(this.clickNode.id);
          this.clickNode = this.$refs.treeRef.getNode(this.clickNode.id).data
        });
      }
    },
    async listExamDate() {
      this.examDate = await this.post('/basic/exam-date/list', {basicId: this.clickNode.id});
    },
    async handleNodeClick(data) {
      this.clickNode = data
      await this.listExamDate()
    }
  }
}
</script>

<style scoped>
a.op {
  font-size: 13px;
}

.card-header {
  height: 25px;
}
</style>